<template>
  <div class="gx-main-con">
    <div class="gx-main-title">
      <span>管线查询</span>
    </div>

    <div class="gx-main-form">
      <!-- <div class="gx_sub_title">
        <span>管网信息</span>
      </div> -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="所属管线:" label-width="80px">
          <SelectTreeTest
            v-model="ruleForm.GuanXianValue"
            filterable
            :data="GuanXianList"
            placeholder="请选择所属管线"
          />
          <!-- <el-select-tree :flagValue = 'flagValue' :Paramsvalue = "Object.keys(ruleForm)[0]" :placeholder="placeholderValue.regionFirst" :options="selectType.regionFirst" :multiple="multiple" :valueMultiple="valueMultiple" @getValue="getSelectedValue1"></el-select-tree> -->
        </el-form-item>
        <el-form-item label="管线名称:" label-width="80px">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入管线名称"
            class="form-item"
            size="small"
          ></el-input>
        </el-form-item>
        <!-- <div class="gx_sub_title">
          <span>管网属性</span>
        </div> -->
        <el-form-item label="管径(cm):" label-width="80px">
          <el-col :span="11">
            <el-input
              v-model="ruleForm.gjmin"
              placeholder="大于"
              class="form-item-between"
              size="small"
            ></el-input>
          </el-col>
          <el-col class="line" :span="2" style="color: #fff">-</el-col>
          <el-col :span="11">
            <el-input
              v-model="ruleForm.gjmax"
              placeholder="小于"
              class="form-item-between"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="管材:" label-width="80px">
          <el-select
            v-model="ruleForm.gc"
            placeholder="请选择管材"
            class="form-item"
            @focus="handleSelectGuanCaiChange"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="埋深(m):" label-width="80px">
          <el-col :span="11">
            <el-input
              v-model="ruleForm.msmin"
              placeholder="大于"
              class="form-item-between"
              size="small"
            ></el-input>
          </el-col>
          <el-col class="line" :span="2" style="color: #fff">-</el-col>
          <el-col :span="11">
            <el-input
              v-model="ruleForm.mcmax"
              placeholder="小于"
              class="form-item-between"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item class="form-item-btn-con">
          <el-button @click="resetForm('ruleForm')" class="common-el-button"
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="common-el-button"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="gx_result_table">
      <!-- <div class="boundary_line"></div> -->
      <div class="gx_sub_title">
        <span>查询结果</span>
        <div class="result-content">
          <div
            class="content-item"
            v-for="(item, key, index) in dataList"
            :key="index"
          >
            <div style="width: 24px; height: 100%">
              <div class="result-item-icon"></div>
            </div>

            <div class="result-item-content" @click="flyto(item)">
              <div
                class="result-item-text"
                v-for="(value, keyName, i) in nameList"
                :key="i"
              >
                <span>{{ value }}:</span>
                <span>{{
                  grade[item[keyName]] ? grade[item[keyName]] : item[keyName]
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-show="dataList.length > 0"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getBoxLineData } from "@/api/http";
import Bus from "@/js/EventBus";
import elSelectTree from "./selectTree.vue";
import SelectTreeTest from "./SelectTreeTest.vue";
// import TrendsTable from "@/components/TrendsTable.vue";
import {
  getGuanxianList,
  getGuanCaiList,
  queryGuanXianList,
} from "@/api/apiPOI";
import { queryGuanXianResult, unitList } from "@/until/NameList";

export default {
  name: "QueryPipeline",
  components: {
    elSelectTree,
    SelectTreeTest,
    // TrendsTable,
  },
  data() {
    return {
      nameList: queryGuanXianResult,
      unit: unitList,
      currentPage1: 1,
      total: 0,
      // 整个结果回显
      ruleForm: {
        JiGouValue: "",
        gjmin: "",
        gjmax: "",
        gc: "",
        msmin: "",
        mcmax: "",
        name: "",
      },
      // 默认参数
      placeholderValue: {
        // regionFirst: "请选择管线",
      },
      GuanXianList: [],
      selectType: {
        regionFirst: [
          {
            id: 1,
            name: "张一",
            children: [
              {
                id: 2,
                name: "张二",
                children: [
                  {
                    id: 3,
                    name: "张三",
                  },
                  {
                    id: 4,
                    name: "张四",
                  },
                ],
              },
            ],
          },
          {
            id: 5,
            name: "王一",
            children: [
              {
                id: 6,
                name: "王二",
              },
              {
                id: 7,
                name: "王三",
              },
            ],
          },
          {
            id: 8,
            name: "李一",
            children: [
              {
                id: 9,
                name: "李二",
              },
              {
                id: 10,
                name: "李三",
              },
            ],
          },
        ],
        regionSecond: [
          {
            id: 1,
            name: "张一二",
            children: [
              {
                id: 2,
                name: "张二",
                children: [
                  {
                    id: 3,
                    name: "张三",
                  },
                  {
                    id: 4,
                    name: "张四",
                  },
                ],
              },
            ],
          },
          {
            id: 5,
            name: "王一",
            children: [
              {
                id: 6,
                name: "王二",
              },
              {
                id: 7,
                name: "王三",
              },
            ],
          },
          {
            id: 8,
            name: "李一",
            children: [
              {
                id: 9,
                name: "李二",
              },
              {
                id: 10,
                name: "李三",
              },
            ],
          },
        ],
        regionThird: [
          {
            id: 1,
            name: "张一三",
            children: [
              {
                id: 2,
                name: "张二",
                children: [
                  {
                    id: 3,
                    name: "张三",
                  },
                  {
                    id: 4,
                    name: "张四",
                  },
                ],
              },
            ],
          },
          {
            id: 5,
            name: "王一",
            children: [
              {
                id: 6,
                name: "王二",
              },
              {
                id: 7,
                name: "王三",
              },
            ],
          },
          {
            id: 8,
            name: "李一",
            children: [
              {
                id: 9,
                name: "李二",
              },
              {
                id: 10,
                name: "李三",
              },
            ],
          },
        ],
        regionFourth: [
          {
            id: 1,
            name: "张一四",
            children: [
              {
                id: 2,
                name: "张二",
                children: [
                  {
                    id: 3,
                    name: "张三",
                  },
                  {
                    id: 4,
                    name: "张四",
                  },
                ],
              },
            ],
          },
          {
            id: 5,
            name: "王一",
            children: [
              {
                id: 6,
                name: "王二",
              },
              {
                id: 7,
                name: "王三",
              },
            ],
          },
          {
            id: 8,
            name: "李一",
            children: [
              {
                id: 9,
                name: "李二",
              },
              {
                id: 10,
                name: "李三",
              },
            ],
          },
        ],
      },
      grade: {
        0: "输水干管",
        1: "供水干管",
        2: "分干管",
        3: "直分支管",
        4: "支管",
        4: "分支管",
      },

      flagValue: false,
      multiple: true,
      filterText: "", // 输入框关键字过滤
      valueMultiple: [],
      dataList: [
        // {
        //   chanName: "管道名称",
        //   chanQ: "设计流量",
        //   chanDiameter: "管径",
        //   chanMaterial: "管材",
        //   chanGrade: "管道级别",
        //   chanLen: "管道长度",
        //   buryingDepth: "埋深",
        //   runCond: "运行状况",
        //   particularYear: "建设年份"
        // },
      ],
      // tableHead: [
      //       {
      //           column_name: 'addressName', column_comment: '测站名称'
      //       },
      //       {
      //           column_name: 'loc', column_comment: '安装地址'
      //       },
      //       {
      //           column_name: 'dtu', column_comment: 'dtu编号'
      //       },
      //       {
      //           column_name: 'run', column_comment: '是否在线'
      //       },
      //       {
      //           column_name: 'sttp', column_comment: '测站类别'
      //       }
      //   ],
      //   TableData: [],

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      value: "",
    };
  },
  mounted() {
    // this.resetForm()
    this.getGuanxianList();
  },
  computed: {
    isShowTable() {
      return this.TableData.length > 0;
    },
    token() {
      return this.$store.getters.token;
    },
  },
  watch: {
    token(newVal, oldVal) {
      // console.log(newVal, oldVal,"newVal, oldVal");
      if (newVal != oldVal) {
        this.getGuanxianList();
      }
    },
  },
  methods: {
    flyto(data) {
      Bus.$emit("removealllinecolor", true);

      console.log(data, "data");
      let res = data.code.split(",");
      console.log(res, "res");

      res.forEach((element) => {
        let idData = {
          UserID: element,
        };
        Bus.$emit("addlinecolor", JSON.stringify(idData));
      });
      let idDatas = {
        UserID: res[0],
      };

      this.searchIdData(JSON.stringify(idDatas));
    },
    async searchIdData(id) {
      let ID = JSON.parse(id);
      const res = await getBoxLineData(`UserID='${ID.UserID}'`);
      // this.lonlat.push(res.features[0])
      console.log(res,"/////////////////////////////")
      let lonlat = res.features[0].geometry.coordinates[0][0];
      // return
      Bus.$emit("dingwei", [lonlat[0], lonlat[1], 50000]);
      // Bus.$emit("dingwei",res.features[0].geometry.coordinates[0][res.features[0].geometry.coordinates[0].length-1]);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log("回显值", this.ruleForm);

          let params = {
            pageSize: 10 + "",
            pageNo: 1 + "",
            data: {
              chanCode: this.ruleForm.GuanXianValue
                ? this.filterTableMater(
                    this.ruleForm.GuanXianValue,
                    this.GuanXianList
                  ).id
                : this.ruleForm.GuanXianValue, //所属管线
              chanDiameterStart: this.ruleForm.gjmin,
              chanDiameterEnd: this.ruleForm.gjmax,
              chanMaterial: this.ruleForm.gc,
              buryingDepthStart: this.ruleForm.msmin,
              buryingDepthEnd: this.ruleForm.mcmax,
              chanName: this.ruleForm.name,
            },
          };
          this.queryGuanXianList(params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      Bus.$emit("removealllinecolor", true);
      (this.ruleForm.JiGouValue = ""),
        (this.ruleForm.gjmin = ""),
        (this.ruleForm.gjmax = ""),
        (this.ruleForm.gc = ""),
        (this.ruleForm.msmin = ""),
        (this.ruleForm.mcmax = "");
      this.dataList = [];
    },

    // 组件传出来的选中结果
    getSelectedValue1(value) {
      this.ruleForm.regionFirst = value[Object.keys(this.ruleForm)[0]];
      console.log("选中的结果值", value);
    },
    getSelectedValue2(value) {
      this.ruleForm.regionSecond = value[Object.keys(this.ruleForm)[1]];
      console.log("选中的结果值", value);
    },
    getSelectedValue3(value) {
      this.ruleForm.regionThird = value[Object.keys(this.ruleForm)[2]];
      console.log("选中的结果值", value);
    },
    getSelectedValue4(value) {
      this.ruleForm.regionFourth = value[Object.keys(this.ruleForm)[3]];
      console.log("选中的结果值", value);
    },
    /**
     * @description: 递归遍历查找数组对象的某个值
     * @param {string} code
     * @param {array} arr
     * @returns {object}
     */
    filterTableMater(label, arr) {
      for (const item of arr) {
        if (item.label === label) return item;
        if (item.children && item.children.length) {
          const _item = this.filterTableMater(label, item.children);
          if (_item) return _item;
        }
      }
    },
    handleSelectGuanCaiChange(value) {
      console.log("===========");

      getGuanCaiList().then((res) => {
        if (res && res.data) {
          let op = res.data.map((item) => {
            return {
              value: item.chanMaterial,
              label: item.chanMaterial,
            };
          });
          this.options = op;
        }
      });
    },
    getGuanxianList() {
      getGuanxianList().then((response) => {
        let toString = Object.prototype.toString;
        if (
          toString.call(response) == "[object Array]" &&
          response.length > 0
        ) {
          this.GuanXianList = this.handleArrayData(response);
        } else {
          this.GuanXianList = [];
        }
      });
    },
    handleArrayData(arr) {
      arr.forEach((element) => {
        element.label = element.name;
        if (element.children) {
          this.handleArrayData(element.children);
        }
      });
      return arr;
    },

    queryGuanXianList(parameter) {
      queryGuanXianList(parameter).then((response) => {
        let toString = Object.prototype.toString;
        if (toString.call(response) == "[object Object]" && response.data) {
          this.dataList = response.data;
          this.total = response.total;
          // this.JiGouList = this.handleArrayData(response);
          // this.TableData = response.data;
          console.log("====res=======", response);
        } else {
          // this.JiGouList = [];
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let params = {
        pageSize: 10 + "",
        pageNo: val + "",
        data: {
          chanCode: this.ruleForm.GuanXianValue
            ? this.filterTableMater(
                this.ruleForm.GuanXianValue,
                this.GuanXianList
              ).id
            : this.ruleForm.GuanXianValue, //所属管线
          chanDiameterStart: this.ruleForm.gjmin,
          chanDiameterEnd: this.ruleForm.gjmax,
          chanMaterial: this.ruleForm.gc,
          buryingDepthStart: this.ruleForm.msmin,
          buryingDepthEnd: this.ruleForm.mcmax,
        },
      };

      this.queryGuanXianList(params);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 6px;
}
.gx-main-con {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.gx-main-title {
  width: 280px;
  height: 35px;
  box-sizing: border-box;
  background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 50px;
  line-height: 34px;
  // background-color: red;
  margin: 10px 0 0 10px;
}

.gx-main-title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #c8e9ff;
}

.gx_sub_title {
  width: 300px;
  height: 16px;
  background: url("@/assets/rightMenu/selectInfo/monitor_form_title.png") 0px
    2px no-repeat;
  text-align: center;
  color: #00baff;
  margin-bottom: 20px;
}

.gx_sub_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  line-height: 12px;
}

.gx_result_table {
  flex: 1;
}
.boundary_line {
  width: 289px;
  height: 1px;
  background: url(@/assets/rightMenu/selectInfo/boundary_line.png);
  background-size: 100% 100%;
  margin-bottom: 20px;
}

.form-item-between {
  width: 77px;
}

.form-item {
  width: 200px;
}

//表单按钮
.common-el-button {
  width: 70px !important;
  height: 28px !important;
  background-image: url("@/assets/oneMap/form-btn.png") !important;
  background-color: transparent;
  border: 0px;
  padding: 0;
  color: #ffffff;
}

//按钮组样式
.form-item-btn-con {
  text-align: center;
}

.result-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 600px);
  margin-top: 10px;

  .content-item {
    display: flex;
    // padding: 0 0 16px 0;
    padding: 8px 20px 2px 20px;
    // background-color: rgba(123,124,125,0.3);
    margin-bottom: 0px;
    cursor: pointer;

    .result-item-icon {
      width: 21px;
      height: 20px;
      background-image: url("@/assets/panelTree/locate.png");
      margin-right: 10px;
    }

    .result-item-content {
      width: 240px;
      .result-item-text {
        width: 100%;
        height: 18px;
        display: flex;
        justify-content: flex-start;
        text-align: left;

        span:nth-child(2n + 1) {
          width: 80px;
          text-align: right;
          font-family: SourceHanSansCN-Regular;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 12px;
          letter-spacing: 0px;
          color: #daf0ff;
          padding-right: 6px;
          // background-color: green;
        }

        span:nth-child(2n) {
          width: 180px;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 12px;
          letter-spacing: 0px;
          color: #00baff;
          // background-color: blue;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .content-item:hover {
    background-color: rgba(15, 97, 175, 0.2);
  }
}

.result-content::-webkit-scrollbar {
  width: 4px;
  height: 1px;
  background: rgba(9, 85, 133, 0.8);
  display: block;
  border-radius: 3px;
}

// // /*滚动条里面小方块*/
.result-content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  // background: #095585;
  background: #052149;
}

// // /*滚动条里面轨道*/
.result-content::-webkit-scrollbar-track {
  border-radius: 3px;
  background: transparent;
}

// ::v-deep {
//   //表单项下边距
//   .el-form-item {
//     margin-bottom: 6px;
//   }
//   //表单文字
//   .el-form-item__label {
//     font-family: SourceHanSansCN-Regular !important;
//     font-size: 14px !important;
//     line-height: 44px !important;
//     color: #daf0ff !important;
//     padding: 0 0 0 16px !important;
//   }

//   //输入框默认样式
//   .el-input__inner {
//     background-color: rgba(4, 57, 109, 0.5) !important;
//     border: 0px !important;
//     color: #daf0ff;
//   }
//   .el-input__inner::placeholder {
//     color: #9ca6af;
//   }

//   .el-input {
//     position: relative;
//     font-size: 12px;
//   }
// }
</style>
